<template>
    <view class="featured clearfix">
        <view class="title">
            <text class="h1">浙家特色推荐</text><text class="desc">最具特色的推荐</text>
        </view>
        <view class="line"></view>
        <view class="imgs">
            <view class="imgs-item">
                <image class="img" src="/static/images/index/icon-manhanquanxi.png" mode="aspectFit"></image>
            </view>
            <view class="imgs-item">
                <image class="img" src="/static/images/index/icon-xianjing.png" mode="aspectFit"></image>
            </view>
            <view class="imgs-item">
                <image class="img" src="/static/images/index/icon-xianshimeiju.png" mode="aspectFit"></image>
            </view>
            <view class="imgs-item">
                <image class="img" src="/static/images/index/icon-wanfa.png" mode="aspectFit"></image>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .line{
        height: 1px;
        background-color: #efefef;
        margin-bottom: 20px;
    }
    .featured{
        margin: 10px 10px;
    }
    .title{
        margin: 20px 0;
    }
    .h1{
        border-left: 5px solid #007AFF;
        font-size: 15px;
        padding: 0 10px;
    }
    .desc{
        margin-left: 10px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .imgs-item{
        float: left;
        width: 25%;
        text-align: center;
    }
    .img{
        display: inline-block;
        width: 3.85rem;
        height: 3.85rem;
        background-size: cover;
        border-radius: 10px;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
</style>
